<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom :title="$t('navigationBar.annunciate')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="tabBox">
					<view class="tab-item" v-for="(item, index) in data.tabList" :key="index" @click="changeIndex(index)">
						<view :class="data.tabIndex == index ? 'tab-choice' : ''">{{ item.title }} </view>
					</view>
				</view>
				<scroll-view :show-scrollbar="false" :refresher-enabled="data.isOpenRefresh" :refresher-triggered="data.triggered" refresher-background="#F0EFF4" refresher-enabled  @refresherrestore="onRestore"  @refresherrefresh="onRefresh" @refresherpulling="refresherpulling" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
					<view class="card-boxCustom gui-transition-all" v-for="(item, index) in data.list" :key="`${index}`"
						@click="handelMessage(item)">
						<view class="head">
							<view class="record-title">
								{{ item.messageTitle }}
							</view>
							<gui-tags v-if="!data.tabIndex && item.type" :text="item.type"
								:customClass="['gui-transparent-bg', 'gui-color-blue']" :lineHeight="2.5"
								:size="12" borderColor="#37886c">
							</gui-tags>
							<gui-tags v-if="data.tabIndex" text="WMS"
							:customClass="['gui-transparent-bg', 'gui-color-blue']" :lineHeight="2.5"
							:size="12" borderColor="#37886c"></gui-tags>
						</view>

						<view class="record-sub" v-html="item.messageContent"></view>
					</view>
					<!-- <view v-if="!data.list.length" class="noticeHooks">
						{{ $t("stockManage.notAvailable") }}
					</view> -->
					<view v-if="data.noticeHooks" class="noticeHooks">
					    {{data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
					</view>
					<view style="height:200rpx"></view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import {
	listBizMessageByUserNameId,
	updateReadFlag,
	getNotReadMsg,
	updateMsg
} from '@/api/api.js'
import { onShow } from '@dcloudio/uni-app';
import { navigate, navigateBack } from '@/utils/routerSkip.js';
import { messageFilter } from '@/utils/index.js';
import { USERINFO } from '@/constant/index.js'
import {
	reactive,
	onMounted
} from 'vue';
let data = reactive({
	list: [],
	tabList:[{
		title:'QMS'
	},{
		title:'WMS'
	}],
	tabIndex:0,
	page: 1,
	rows: 10,
	noticeHooks: false, //暂无相关数据标识
	module:'qms',
	triggered:false,
	isOpenRefresh:true,
	noticeHooks: false, //暂无相关数据标识
});
onShow(() => {
	getNotMsg()
})
onMounted(() => {

})
//tabs标签点击事件
const changeIndex=(index)=>{
	data.module = index ? 'wms' : 'qms'
	data.page = 1;
	data.rows = 10;
	data.tabIndex=index;
	data.list = []
	getNotMsg()
}
//上拉加载
const scrolltolower = () => {
	if(!data.noticeHooks){
		data.page ++
		getNotMsg()
	}
}
const getNotMsg = async () => {
	let parmes = {
		module:data.module,
		page:data.page,
		rows:data.rows,
	}
	let res = await getNotReadMsg(parmes)
	data.triggered = false;
	let arr = messageFilter(res.data.rows || [])
	data.noticeHooks = false
	if (data.page === 1) {
		data.list = arr
	} else {
		data.list = [...data.list, ...arr]
	}
	data.noticeHooks = data.list.length >= res.data.total
}
const getRequestData = async () => {
	let userInfo = uni.getStorageSync(USERINFO);
	let parmes = {
		module:data.module,
		page: data.page,
		rows: data.rows,
		userNameId: userInfo.userNameId
	}
	let res = await listBizMessageByUserNameId(parmes)
	data.noticeHooks = false
	data.triggered = false;
	if (data.page === 1) {
		if (res.rows.length == 0) {
			data.noticeHooks = true
		}
		data.list = res.rows
	} else {
		if (data.list.length == res.total) {
			data.noticeHooks = true
		} else {
			data.list = [...data.list, ...res.rows]
		}
	}
}
const handelMessage = async (item) => {
	// let userInfo = uni.getStorageSync(USERINFO);
	// let parmes = {
	// 	messageId: item.id,
	// 	userNameId: userInfo.userNameId
	// }
	// let res = await updateReadFlag(parmes)
	// if(res.statusCode == 200){
	// 	data.page = 1
	// 	getRequestData()
	// }
	navigate({
		url: item.messageUrl
	})
	// let parmes = {
	// 	id: item.receiverId,
	// 	readFlag: 'Y'
	// }
	// let res = await updateMsg(parmes)
	// if (res.statusCode == 200) {
	// 	if (item.messageUrl && item.messageUrl.length > 0) {
	// 		navigate({
	// 			url: item.messageUrl
	// 		})
	// 	} else {
	// 		getNotMsg()
	// 	}
	// }
}
const refresherpulling = () => {
	console.log(11111)
	data.triggered = true
	
}
// 自定义下拉刷新被触发
const onRefresh = () => {
	setTimeout(() => {
		getNotMsg()
      }, 1000);
	
}
// 自定义下拉刷新被复位
const onRestore = () =>{
	data.triggered = 'restore'; // 需要重置
	console.error("onRestore");
}
</script>

<style scoped lang="less">
//tabs
.tabBox {
	height: 100rpx;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	white-space: nowrap;
	margin-bottom: 30rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
}

.tab-item {
	// padding: 15rpx 20rpx;
	position: relative;
	display: inline-block;
	text-align: center;
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition-property: background-color, width;
	font-size: 36rpx;
}

.tab-choice {
	position: relative;
	color: #37886c;
}
.gui-color-blue{
	color: #37886c !important
}

.tab-choice:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12rpx;
	width: 100%;
	height: 4rpx;
	border-radius: 2rpx;
	background-color: #37886c;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
	position: relative;
}
.head{
	color: #333333;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.record-title {
	// width: 100%;
	line-height: 50rpx;
	width: 80%;
	color: #333;
	font-size: 30rpx;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}

.record-sub {
	width: 100%;
	color: #666;
	font-size: 28rpx;
}

.scroll {
	position: absolute;
	left: 0px;
	top: 110rpx;
	width: 100%;
	bottom: 0px;
}
</style>
